<style>
.logo {
  height: auto;
  background-color: #f2f6fc;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  margin-bottom: 20px;
}
.logo > .top {
  font-size: 16px;
  line-height: 34px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
}
.logo > .top > span {
  position: relative;
}
.logo > .top > span::after {
  position: absolute;
  bottom: -8px;
  left: 0;
  content: "";
  width: 120%;
  height: 1px;
  background-color: #e6a23c;
}
.logo > .demo-ruleForm input {
  height: 30px;
}
.logo > .demo-ruleForm .el-form-item__label {
  line-height: 40px;
}
.el-form-item {
  margin-bottom: 5px !important;
}
.el-form-item__label {
  width: 80px !important;
}
.el-form-item__content {
  margin-left: 80px !important;
}
.logo > .demo-ruleForm .el-button {
  width: 100% !important;
  height: 30px !important;
  line-height: 7px !important;
}
.logo > .demo-ruleForm .text {
  text-align: right;
}
.logo > .demo-ruleForm .el-form-item__error {
  top: 80% !important;
}
.maxwidth{
  min-width: 960px;
}
.maxwidth.col{
  width: 960px;
}
</style>
<template>
  <div class="home maxwidth">
    <myheader></myheader>
    <el-main>
      <el-row type="flex" class="row-bg" justify="center" >
        <el-col class="maxwidth col">
          <el-row :gutter="20" >
            <el-col :span="16">
              <!-- 内容 -->
              <router-view></router-view>
            </el-col>
            <el-col :span="8">
              <!-- 登录 -->
              <template v-if="!$store.state.qiantai.token">
                <login
                  v-if="off"
                  @gotozhuce="off = false"
                  @douxiaoshi="allOff = false"
                ></login>
                <!-- 注册 -->
                <zhuce v-else @gotudenglu="off = true"></zhuce>
              </template>
              <!-- <h1 v-else>登录呢</h1> -->
              <zhanshi v-else></zhanshi>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-main>
    <myfooter></myfooter>
  </div>
</template>

<script>
import myheader from "../components/myheader.vue";
import myfooter from "../components/myfooter.vue";
// import contentItem from '../components/common/contentItem.vue'
// import footMenu from '../components/common/footMenu.vue'
import login from "../components/common/login.vue";
import zhuce from "../components/common/zhuce.vue";
import zhanshi from "../components/common/zhanshi.vue";
export default {
  components: {
    myheader,
    myfooter,
    // contentItem,
    // footMenu,
    login,
    zhuce,
    zhanshi,
  },
  created() {
    this.$store.commit("qiantai/initToKen");
  },
  data() {
    return {
      off: true,
    };
  },
  methods: {
    // clickBtn(index,val){
    //   console.log(index,val);
    //   this.$store.commit('setShopList',{index,val})
    // }
  },
};
</script>
